<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getContextPath();
	String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+basePath+"/";
	request.setAttribute("path",path);
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>预约</title>
	<script type="text/javascript" src="js/jquery1.12.js"></script>
	<script type="text/javascript" src="${path}/js/jquery-ui.js"></script>
	<script type="text/javascript" src="${path}/js/datepicker-cn.js"></script>
	
	<link href="css/style.css" rel="stylesheet" media="all">
	<link href="${path}/css/jquery-ui.css" rel="stylesheet" media="all">
	<link rel="shortcut icon" href="img/favicon.png">
	<style type="text/css">
		.specialdays a{
            background: gray !important;
            cursor: default !important;
        }
        
	</style>
</head>
<body>
	<header class="top_header">
		<h1><a href="javascript:history.go(-1);" class="go_back"></a><span>预约</span><a class="share_a"></a></h1>
	</header><!-- header -->
	<form id="form" name="form" method="post" action="${path}/kaOrderDet?themeId=${themeId}" onsubmit="return toVaild()">
	<div class="content_wrap kaappointment_wrap">
		<div class="kaappotop_wrap">
			<img src="${path}${theme.advertisingMap}" alt="${theme.themeName}">
		</div><!-- kaappotop_wrap -->
		<div class="kasample_abs">
		<a href="#">
			<div class="phgh_img">
				<img src="${path}${photographer.headPortrait}">
			</div>
			<p class="phgh_txt">${photographer.name}</p>
			<p class="kaappo_price">￥${theme.price}</p>
		</a>
		</div><!-- kasample_abs -->
		
		<div class="ka_appointment">
				<ul class="kadate_ul">
					<h4>选择拍摄日期</h4>
					<div id="datepicker"></div>
					<input type="hidden" id="scheduleDate" name="scheduleDate" />
					
				</ul>
		</div><!-- ka_appointment -->
		
	</div><!-- content_wrap -->
	
	<div class="kasampledet_nav">
		<button type="submit">确认预约</button>
	</div><!-- kasampledet_nav -->
	<div class="footer_copyright">
		<p><span>苏州知行合一网络科技有限公司</span>提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->
	
<script>

var specialdClose=new Array();
specialdClose=${scheduleClose};

refreshDatePicker();

function refreshDatePicker(){
	var themeDuration = $('#themeDuration').val();
	$( "#datepicker" ).datepicker({
		inline: true,
		dateFormat: "yy-mm-dd",
		minDate:0,
		beforeShowDay: function( date ) {
	                var m=date.getMonth();
	                var d=date.getDate();
	                var y=date.getFullYear();
	                m = dateChange(m+1);
	                d = dateChange(d);
	                   
	                var formatDate=y+"-"+m+"-"+d;//此处日期的格式化和speciald中的格式一样
	                var specialdCloseStr = specialdClose.toString();
	                
	                if(specialdCloseStr.indexOf(formatDate)!=-1){
	                    //此处要返回一个数组，specialdays是添加样式的类
	                    return [true,"ui-datepicker-unselectable ui-state-disabled",formatDate];
	                }else{
	                    return [true,'',''];
	                }
	            },
		onSelect:function(dateText,inst){
			$('#scheduleDate').val(dateText);
		}
	});
}

function dateChange(da){
		var str='1,2,3,4,5,6,7,8,9';
		if(str.indexOf(da)!=-1){
			return "0"+da;
		}
		return da;
	};

function toVaild(){
	if(!$('#scheduleDate').val()) {
		alert("请选择拍摄日期");
		return false;
	}
	
	return true;
}
</script>


</body>
</html>